<template>
    <div class="toolTip">
        <div class="triangle"></div>
        <div class="contentList">
            <div v-for="(item, index) in list"
                 :key="index"
                 @click="handleClick(item)"
                 class="itemWrap">
                <img v-if="item.isImg"
                     :src="item.imgUrl"
                     alt="icon"
                     style="width: 20px">
                <van-icon
                        v-else
                        :class-prefix="item.prefix"
                        :name="item.iconName"
                        size="20"></van-icon>
                <div class="content">{{item.name}}</div>
            </div>
        </div>
    </div>
</template>

<script>
    const itemObj = {
        index: {
            //imgUrl: require('../assets/images/icon-fail.png'),
            iconName: "shop-collect",
            prefix: "pk-icon",
            name: "首页",
            isImg: false,
            value: "index"
        },
        footprint: {
            //imgUrl: require('../assets/images/icon-fail.png'),
            iconName: "footprint",
            prefix: "pk-icon",
            name: "足迹",
            isImg: false,
            value: "footprint"
        }
    };
    export default {
        name: 'toolTip',
        components: {},

        data() {
            return {
                itemObj: itemObj,
                itemArr: ["index", "footprint"],
                list: []
            }
        },

        created() {
            this.reBuildListData()
        },
        computed: {},
        watch: {},
        methods: {
            reBuildListData() {
                this.list = [];
                for(let i=0; i<this.itemArr.length; i++) {
                    for( let key in this.itemObj)  {
                        if(key === this.itemArr[i]) {
                            this.list.push(this.itemObj[key])
                        }
                    }
                }
            },
            handleClick(item) {
                this.$emit("pk-click", item)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .toolTip {
        position: absolute;
        top: 38px;
        right: 10px;
        .triangle {
            width: 100%;
            display: flex;
            justify-content: flex-end;
            padding-right: 10px;
            box-sizing: border-box;
        }
        .triangle::before {
            content: "";
            width: 0;
            height: 0;
            border: 10px solid;
            border-color: transparent transparent rgba(0,0,0,0.3) transparent;
        }
        .contentList {
            background: rgba(0,0,0,0.3);
            border-radius: 4px;
            .itemWrap {
                display: flex;
                align-items: center;
                padding: 4px 7px;
                border-bottom: 1px solid rgba(2255,225,225,0.4);
            }
            .content {
                padding-left: 8px;
                padding-right: 2px;
            }
        }
    }
</style>
